<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>微电影</title>
    <link rel="shortcut icon" href="../../static/base/images/logo.png">
    <link rel="stylesheet" href="../../static/base/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/base/css/bootstrap-movie.css">
    <link rel="stylesheet" href="../../static/base/css/animate.css">
    <style>
        .navbar-brand>img {
            display: inline;
        }

    </style>
    <style>
        .media{
            padding:3px;
            border:1px solid #ccc
        }

    </style>
</head>

<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand" style="width:250px;">
                <img src="../../static/base/images/logo.png" style="height:30px;">&nbsp;微电影
            </a>
        </div>
        <!--小屏幕导航按钮和logo-->
        <!--导航-->
        <div class="navbar-collapse collapse">
            <form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
                <div class="form-group input-group">
                    <input type="text" class="form-control" placeholder="请输入电影名！" style="height: 35px;">
                    <span class="input-group-btn">
                        <a class="btn btn-default" href="/search"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
                    </span>
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="curlink" href="/index"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
                </li>
                <li>
                    <a class="curlink" href="/login"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
                </li>
                <li>
                    <a class="curlink" href="/register"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
                </li>
                <li>
                    <a class="curlink" href="/logout"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
                </li>
                <li>
                    <a class="curlink" href="/user"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
                </li>
            </ul>
        </div>
        <!--导航-->

    </div>
</nav>
<!--导航-->
<!--内容-->
<div class="container" style="margin-top:120px">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;会员注册</h3>
                </div>
                <div class="panel-body">
                    <form role="form" method="post" action="/regist">
                        <fieldset>
                            <div class="form-group">
                                <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称&nbsp;<span id="nickname_error" style="color: red">{{ nickname_error }}</span></label>
                                <input id="input_name" class="form-control input-lg" placeholder="昵称" name="nickname" type="text" autofocus>
                            </div>
                            <div class="col-md-12" id="error_name"></div>
                            <div class="form-group">
                                <label for="input_email"><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱&nbsp;<span id="email_error" style="color: red">{{ email_error }}</span></label>
                                <input id="input_email" class="form-control input-lg" placeholder="邮箱" name="email" type="email" autofocus>
                            </div>
                            <div class="col-md-12" id="error_email"></div>
                            <div class="form-group">
                                <label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手机&nbsp;<span id="phone_error" style="color: red">{{ phone_error }}</span></label>
                                <input id="input_phone" class="form-control input-lg" placeholder="手机" name="phone" type="text" autofocus>
                            </div>
                            <div class="col-md-12" id="error_phone"></div>
                            <div class="form-group">
                                <label for="input_password"><span class="glyphicon glyphicon-lock"></span>&nbsp;密码&nbsp;<span id="password_error" style="color: red">{{ password_error }}</span></label>
                                <input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value="">
                            </div>
                            <div class="col-md-12" id="error_password"></div>
                            <div class="form-group">
                                <label for="input_repassword"><span class="glyphicon glyphicon-lock"></span>&nbsp;确认密码&nbsp;<span id="repassword_error" style="color: red">{{ repassword_error }}</span></label>
                                <input id="input_repassword" class="form-control input-lg" placeholder="确认密码" name="repassword" type="password" value="">
                            </div>
                            <div class="col-md-12" id="error_repassword"></div>
                                <input id="submit" type="submit"  class="btn btn-lg btn-success btn-block" value="注册">
                        </fieldset>
                        {{ csrf_token }}
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--内容-->
<!--底部-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    ©&nbsp;2017&nbsp;flaskmovie.imooc.com&nbsp;京ICP备 13046642号-2
                </p>
            </div>
        </div>
    </div>
</footer>
<!--底部-->
<script src="../../static/base/js/jquery.min.js"></script>
<script src="../../static/base/js/bootstrap.min.js"></script>
<script src="../../static/base/js/jquery.singlePageNav.min.js"></script>
<script src="../../static/base/js/wow.min.js"></script>
<script src="../../static/lazyload/jquery.lazyload.min.js"></script>
<script src="../../static/js/holder.min.js"></script>
<script>
    $(function() {
        new WOW().init();
    })

</script>
<script>
    $(document).ready(function() {
        $("img.lazy").lazyload({
            effect: "fadeIn"
        });
    });

</script>
<script>
     document.getElementById("submit").onclick=function (event) {
        if(!nicknamecheck(event))
        {
            event.preventDefault();
        }
        if(!emailcheck(event)){
            event.preventDefault();
        }
        if(!phonecheck(event)){
            event.preventDefault();
        }
        if(!passwordcheck(event)){
            event.preventDefault();
        }
        if(!repasswordcheck(event)){
            event.preventDefault();
        }
    };

    var nickname = document.getElementsByName("nickname")[0];
    nickname.onfocus = function (event) {
        document.getElementById("nickname_error").innerText="";
    };
    nickname.onblur = nicknamecheck;
    function nicknamecheck(event) {
        var usrname = nickname.value;
        var patt = /^[a-z_]\w{3,19}$/i;
        if(usrname.search(patt) < 0)
        {
            document.getElementById("nickname_error").innerText="用户名不能以数字开头,4-20位";
            return false;
        }
            return true;
    }

    var email = document.getElementsByName("email")[0];
    email.onfocus = function (event) {
        document.getElementById("email_error").innerText="";
    };
    email.onblur = emailcheck;
    function emailcheck(event) {
        var emailInfo = email.value;
        var patt = /^\w+@[a-z\d]{2,3}\.[a-z]{2,3}$/i;
        if(emailInfo.search(patt) < 0)
        {
            document.getElementById("email_error").innerText="邮箱格式不正确";
            return false;
        }
            return true;
    }

    var phone = document.getElementsByName("phone")[0];
    phone.onfocus = function (event) {
        document.getElementById("phone_error").innerText="";
    };
    phone.onblur = phonecheck;
    function phonecheck(event) {
        var phoneInfo = phone.value;
        var patt = /^1(([3578]\d)|(47))\d{8}$/i;
        if(phoneInfo.search(patt) < 0)
        {
            document.getElementById("phone_error").innerText="手机号不正确";
            return false;
        }
            return true;
    }

    var password = document.getElementsByName("password")[0];
    password.onfocus = function (event) {
        document.getElementById("password_error").innerText="";
    };
    password.onblur = passwordcheck;
    function passwordcheck(event) {
        var passwordInfo = password.value;
        var patt = /^[A-Za-z_]\w{6,19}$/i;
        if(passwordInfo.search(patt) < 0)
        {
            document.getElementById("password_error").innerText="密码由字母数字下划线组合,不能以数字开头";
            return false;
        }
            return true;
    }

    var repassword = document.getElementsByName("repassword")[0];
    repassword.onfocus = function (event) {
        document.getElementById("repassword_error").innerText="";
    };
    repassword.onblur = repasswordcheck;
    function repasswordcheck(event) {
        var repasswordInfo = repassword.value;
        var password = document.getElementsByName("password")[0];
        var passwordInfo = password.value;
        if(repasswordInfo != passwordInfo)
        {
            document.getElementById("repassword_error").innerText="两次输入密码不一致";
            return false;
        }
            return true;
    }
</script>
</body>
</html>
